<template>
  <h1>{{ person.name }}</h1>
  <ul>
    <li>Age: {{ person.age }}</li>
    <li>Job: {{ person.job.name }}</li>
    <li>Salary: {{ person.job.salary }}K</li>
  </ul>
</template>

<script>
import { setup, reactive, toRef } from 'vue'
export default {
  name: 'main',
  setup () {
    const person = reactive({
      name: 'Tom',
      age: 20,
      job: {
        name: 'Web develop Engineer',
        salary: 20
      }
    })

    return { person }
  }
}
</script>

<style>
</style>
